<template>
	<div style="display: flex;">
		<div class="recuser">
			<img style="width: 70px; height: 70px;border-radius:50%;" src="../../assets/tx1.jpg" />
			<h3>Jacob</h3>
			<div style="margin-left: 9px;">
				<mt-button  size="small" type="primary" @click="alertbox">关注</mt-button>
			</div>
		</div>
		<div class="recuser">
			<img style="width: 70px; height: 70px;border-radius:50%;" src="../../assets/user/picture2.jpg" />
			<h3>Vivian</h3>
			<div style="margin-left: 9px;">
				<mt-button size="small" type="primary" @click="alertbox">关注</mt-button>
			</div>
		</div>
		<div class="recuser">
			<img style="width: 70px; height: 70px;border-radius:50%;" src="../../assets/tx3.jpg" />
			<h3>Yugiii</h3>
			<div style="margin-left: 9px;">
				<mt-button size="small" type="primary" @click="alertbox">关注</mt-button>
			</div>
		</div>
		<div class="recuser">
			<img style="width: 70px; height: 70px;border-radius:50%;" src="../../assets/tx4.jpg" />
			<h3>Linda</h3>
			<div style="margin-left: 9px;">
				<mt-button size="small" type="primary" @click="alertbox">关注</mt-button>
			</div>
		</div>
	</div>
</template>

<script>
export default {  
  name: 'recuser',  
  data() {  
    return {  
      
    };  
  },
methods:{
    alertbox () {
	    MessageBox.alert('提示', '操作成功');
//		this.$MessageBox({
//			title:'提示',
//			message:操作成功
//		})
    },
   }  
} 

</script>

<style>
.recuser{
	background-color: #FFFFFF;
	margin-left: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	width: 90px;
	justify-content: center;
	border-radius:10%;
	
}
</style>